<template>
  <div class="body-box">
    <!-- 添加 -->
    <div class="add-notice-btn">
      <el-button class="com-btn" size="mini" icon="el-icon-plus" @click="addNotice()">发布公告</el-button>
    </div>
    <window-title title="公告列表"></window-title>
    <div class="notice-ist-box">
      <el-table border size="mini" :data="list.data">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="公告标题" prop="title"></el-table-column>
        <el-table-column label="发布时间" prop="create_time" width="180px"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="item">
            <el-button icon="el-icon-edit" size="mini" @click="edit(item.row)">编辑</el-button>
            <el-button icon="el-icon-delete" size="mini" @click="deleteNotice(item.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          background
          small
          :current-page="list.current_page"
          :page-size="list.per_page"
          layout="total, prev, pager, next, jumper"
          :total="list.total"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
    <!-- 模态框 -->
    <el-dialog :visible.sync="notice_dialog" :title="is_add ? '添加公告' : '编辑公告'" width="700px">
      <el-form label-position="top" size="small" :model="form" :rules="rules" ref="form">
        <el-form-item label="公告标题" prop="title">
          <el-input placeholder="请输入公告标题" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <quill-editor
            :options="editorOption"
            ref="myQuillEditor"
            @ready="onEditorReady($event)"
            v-model="form.content"
            class="edit-itme"
          ></quill-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('form')">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "../../assets/js/quill-config.js";

export default {
  components: { windowTitle, quillEditor },
  data() {
    return {
      notice_dialog: false,
      is_add: true,
      form: {
        title: "",
        content: ""
      },
      editorOption: quillConfig,
      rules: {
        title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
        content: [
          { required: true, message: "请输入公告内容", trigger: "blur" }
        ]
      },
      list: {
        current_page: 1,
        data: []
      }
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  methods: {
    //删除
    deleteNotice(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("notice/deleteNotice", {
            data: { id: id },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.getData();
              }
            }
          });
        })
        .catch(() => {});
    },
    //编辑
    edit(data) {
      this.form = {
        id: data.id,
        title: data.title,
        content: data.content
      };
      this.is_add = false;
      this.notice_dialog = true;
    },
    //获取页面加载数据
    getData() {
      this.ajaxs("notice/getList", {
        data: { page: this.list.current_page },
        success: res => {
          this.list = res.msg;
        }
      });
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
      this.getData();
    },
    onEditorReady(editor) {},
    //添加公告
    addNotice() {
      this.form = { title: "", content: "" };
      this.is_add = true;
      this.notice_dialog = true;
    },
    //立即提交
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addSub();
        }
      });
    },
    addSub() {
      var url = this.is_add ? "notice/add" : "notice/eidtNotice";
      this.ajaxs(url, {
        data: this.form,
        success: res => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.form = { title: "", content: "" };
            this.notice_dialog = false;
            this.getData();
          }
        }
      });
    }
  }
};
</script>

<style>
.add-notice-btn {
  text-align: right;
}
.notice-ist-box {
  margin-top: 20px;
}
.edit-itme {
  height: 400px;
  padding-bottom: 100px;
}
</style>